<!--
Copyright (C) 2024 The XLang Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        #chat-container {
            width: 60%;
            max-width: 600px;
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        #history {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
            max-height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }

            #history li {
                padding: 10px;
                border-bottom: 1px solid #ddd;
            }

                #history li:nth-child(even) {
                    background-color: #f9f9f9;
                }

        #prompt-input, #model-select {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #send-btn {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

            #send-btn:hover {
                background-color: #0056b3;
            }
    </style>
</head>
<body>

    <div id="chat-container">
        <select id="model-select"></select>
        <ul id="history">
            <!-- History of prompts and responses will appear here -->
        </ul>
        <input type="text" id="prompt-input" placeholder="Enter your prompt here...">
        <button id="send-btn">Send</button>
    </div>

    <script>
    let sessionId = 0;

    // Fetch available models
    fetch('https://api.openai.com/v1/models', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer key put here`

        }
    })
    .then(response => response.json())
    .then(data => {
        const modelSelect = document.getElementById('model-select');
        data.data.forEach(model => {
            const option = document.createElement('option');
            option.value = model.id;
            option.textContent = model.id;
            modelSelect.appendChild(option);
        });
    })
    .catch(error => {
        console.error('Error fetching models:', error);
        alert('An error occurred while fetching the models!');
    });

    document.getElementById('send-btn').addEventListener('click', function() {
        const prompt = document.getElementById('prompt-input').value;
        const model = document.getElementById('model-select').value;

        if (prompt.trim() === '') {
            alert('Please enter a prompt!');
            return;
        }

        // Add the prompt to the history list
        const historyList = document.getElementById('history');
        const promptItem = document.createElement('li');
        promptItem.textContent = `You: ${prompt}`;
        historyList.appendChild(promptItem);

        // Clear the input box
        document.getElementById('prompt-input').value = '';

        // Send the prompt to OpenAI API with SessionID
        fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer key put here`
            },
            body: JSON.stringify({
                model: model,
                messages: [{role: 'user', content: prompt}],
                //SessionID: sessionId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Get the response from the API
            const responseText = data.choices[0].message.content;
            //sessionId = data.SessionID; // Update session ID

            // Add the response to the history list
            const responseItem = document.createElement('li');
            responseItem.textContent = `AI: ${responseText}`;
            historyList.appendChild(responseItem);

            // Scroll the history to the bottom
            historyList.scrollTop = historyList.scrollHeight;
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while fetching the response!');
        });
    });
    </script>

</body>
</html>
